<template>
  <div class="foot">
    <!--需要传入模块的就使用v-bind，传入定值的直接用属性名即可-->
    <!--关于topath的传值-->
    <!--传入/home，则无视父路由，跳转到domain/#/home-->
    <!--传入home，则在父路由的前提下，跳转到domain/#/parents/home-->
    <!--<selector topath="index" content="首页" :imgsrc="$route.meta.footChoose === 'index'?index_selected:index_unselected"></selector>-->
    <!--<selector topath="file" content="文件" :imgsrc="$route.meta.footChoose === 'file'?file_selected:file_unselected"></selector>-->
    <!--<selector topath="mine" content="我的" :imgsrc="$route.meta.footChoose === 'mine'?mine_selected:mine_unselected"></selector>-->
    <selector topath="appeal" content="首页" :imgsrc="index_icon"></selector>
    <selector topath="Enopass" content="文件" :imgsrc="file_icon"></selector>
    <selector topath="Emine" content="我的" :imgsrc="mine_icon"></selector>
  </div>
</template>

<script>
import selector from '@/components/Examine/foot_selector2'
import indexUnselected from '@/assets/img/icon/homepage_btn_n.svg'
import indexSelected from '@/assets/img/icon/homepage_btn_s.svg'
import fileUnselected from '@/assets/img/icon/file_btn_n.svg'
import fileSelected from '@/assets/img/icon/file_btn_s.svg'
import mineUnselected from '@/assets/img/icon/personal_btn_n.svg'
import mineSelected from '@/assets/img/icon/personal_btn_s.svg'
export default {
  name: 'foot',
  components: {
    selector: selector
  },
  data () {
    return {
      index_unselected: indexUnselected,
      index_selected: indexSelected,
      file_unselected: fileUnselected,
      file_selected: fileSelected,
      mine_unselected: mineUnselected,
      mine_selected: mineSelected,
      index_icon: null,
      file_icon: null,
      mine_icon: null
    }
  },
  watch: {
    $route () {
      // 监控路由，无论是手动还是router.js里的meta变化，都会改变底部foot
      this.index_icon = this.$route.meta.footChoose === 'Eindex' ? this.index_selected : this.index_unselected
      this.file_icon = this.$route.meta.footChoose === 'Efile' ? this.file_selected : this.file_unselected
      this.mine_icon = this.$route.meta.footChoose === 'Emine' ? this.mine_selected : this.mine_unselected
    }
  },
  mounted () {
    // 必须要用mounted赋值，并且用watch监控路由
    // 否则进入top_operation时手动给this.$route.meta.footChoose赋值不会引起Foot变化
    this.index_icon = this.$route.meta.footChoose === 'Eindex' ? this.index_selected : this.index_unselected
    this.file_icon = this.$route.meta.footChoose === 'Efile' ? this.file_selected : this.file_unselected
    this.mine_icon = this.$route.meta.footChoose === 'Emine' ? this.mine_selected : this.mine_unselected
  }
}
</script>

<style lang="scss" scoped>
  .foot{
    //fixed，基于浏览器窗口进行定位
    position: fixed;
    bottom: 0;
    font-size: px2rem(20);
    display: flex;
    /*width: px2rem(375);*/
    width: 100%;
    height: px2rem(55);
    background: #FFF;
  }
</style>
